<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<view class="">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<view class="" slot="top" style="background-color: #F8F8F8;">
				<u-navbar :border-bottom="false" :title="'售后订单'" :title-size="36" :background="{'background':'#F8F8F8'}" :title-bold="true"
				 :title-color="textColor" :customBack="toPage">
				</u-navbar>
				<view class="u-flex u-p-l-35 u-p-r-35 u-p-t-20 u-p-b-20">
					<view class="u-flex-1 u-m-r-16" style="background-color: #F8F8F8;">
						<u-search :searchIconFlag="true" v-model="searchText" input-align="center" placeholder="订单号" height="70" 
						:border-color="'#FFBB1A'" :bg-color="'#F8F8F8'" :show-action="false" @change="reloadFn" @search="reloadFn"></u-search>
					</view>
					<view class="u-flex-col " @tap="filterShow = true" :style="{color:noFilter?'#333':'#ff551a'}">
						<view class="u-flex" style="flex-direction: column;">
							<view class="iconfont icon-shaixuan1"></view>
						</view>
						<view class="">筛选</view>
					</view>
				</view>
				
				<z-tabs ref="tabs"  :list="tabList" :current="current" @change="tabsChange" :bgColor="'#f8f8f8'" :bar-height="0" :active-color="'#333'" :inactive-color="'#999'" 
				:active-style="activeStyle" :inactive-style="inactiveStyle"></z-tabs>
			</view>
			
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="current" @animationfinish="animationfinish" v-if="reloadFlag">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
					<order-list :reload="current===index"  :keyWords="searchText" :filterData="filterData" :tabIndex="index" :value="item.value" :currentIndex="current"></order-list>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
		<!-- 筛选 -->
		<u-popup v-model="filterShow" mode="bottom" @close="submitBtnClickFn">
			<view class="box-padding" >
				<view class="u-text-center u-m-b-30 u-font-32 u-text-bold">筛选</view>
				<view class="u-m-b-30">
					<view class="u-font-30 u-text-bold">销售商</view>
					<view style="border-bottom: 1rpx solid #eaeaea;" >
						<u-input v-model="saleShopName" type="text" :border="false"  placeholder="请输入销售商名称" />
					</view>
				</view>
				<view class="u-m-b-30">
					<view class="u-font-30 u-text-bold ">订单号</view>
					<view style="border-bottom: 1rpx solid #eaeaea;" >
						<u-input v-model="orderNo" type="text" :border="false"  placeholder="请输入订单号"  />
					</view>
				</view>
				<view class="u-font-30 u-text-bold u-m-b-30">售后日期</view>
				<view class="price-container u-flex u-row-between ">
					<view :class="['price-dad',{'grey-color':startTime===''} ]" @tap="openDateShow(true)">
						{{startTime!==''?startTime:'开始日期'}}
					</view>
					<view style="margin: 0 30rpx;">-</view>
					<view :class="['price-dad',{'grey-color':endTime===''} ]" @tap="openDateShow(false)">
						{{endTime!==''?endTime:'结束日期'}}
					</view>
				</view>
					<view class="btn-group u-flex">
						<view class="filter-reset u-text-center" @click="resetFilterFn">重置</view>
						<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
					</view>
			</view>
		</u-popup>
		<u-picker v-model="dateShow" mode="time" cancel-color="#ff551a" cancel-text="清除" :default-time="defaultDate" @confirm="dateConfirmFn" @cancel="dateCancelFn" safe-area-inset-bottom	></u-picker>
	</view>
	
</template>

<script>
	import OrderList from './orderList.vue'
	export default {
		data() {
			return {
				dateShow:false,
				dateShowType:0,
				defaultDate:'',
				params: {
					year: true,
					month: true,
					day: true
				},
				startTime:'',
				endTime:'',
				filterShow:false,
				saleShopName:'',
				orderNo:'',
				searchText:'',
				tabList: [
					{
						name:'全部',
						value:99
					},
					{
						name:'待审核',
						value:0
					},
					{
						name:'待退款',
						value:1
					},
					{
						name:'已完成',
						value:2
					},
					],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				reloadFlag:true,
				activeStyle:{
					fontWeight:'bold',
					fontSize:'32rpx',
				},
				inactiveStyle:{
					fontSize:'28rpx',
				},
				filterData:{
					startTime:'',
					endTime:'',
					orderNo:'',
					saleShopName:'',
				}
			};
		},
		components:{
			OrderList
		},
		computed:{
			noFilter(){
				return this.filterData.startTime == ''&& this.filterData.endTime == ''&& this.filterData.orderNo == ''&& this.filterData.saleShopName == ''
			},
		},
		onShow() {
			uni.$off('reloadSignList')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('reloadSignList',function(data){
				that.reloadFlag = false;
				that.current = Number(data);
				that.reloadFlag = true;
			});
		},
		created() {
		},
		methods: {
			// 提交筛选条件
			submitBtnClickFn(){
				this.$set(this.filterData,'startTime',this.startTime);
				this.$set(this.filterData,'endTime',this.endTime);
				this.$set(this.filterData,'orderNo',this.orderNo);
				this.$set(this.filterData,'saleShopName',this.saleShopName);
				this.filterShow = false;
			},
			// 重置筛选条件
			resetFilterFn(){
				this.startTime = '';
				this.endTime = '';
				this.orderNo = '';
				this.saleShopName = '';
			},
			// 日期选择提交
			dateConfirmFn(val){
				if(this.dateShowType ===1){
					this.startTime = val.year+'-'+val.month+'-'+val.day;
				}else{
					this.endTime = val.year+'-'+val.month+'-'+val.day;
				}
			},
			// 日期选择删除
			dateCancelFn(){
				if(this.dateShowType ===1){
					this.startTime = '';
				}else{
					this.endTime = '';
				}
			},
			// 打开时间选择器
			openDateShow(isStart){
				this.defaultDate = isStart?this.startTime:this.endTime;
				this.dateShowType = isStart?1:2;
				this.dateShow = true;
			},
			
			toPage() {
				uni.navigateBack();
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动结束
			animationfinish(e) {
				let current = e.detail.current;
				this.current = current;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/static/iconfont/iconfont.css';
	.swiper {
		height: 100%;
	}
	.price-container{
		.price-dad{
			background-color: #fff;
			border: 1px solid #E7E7E7;
			border-radius: 35px;
			box-sizing: border-box;
			padding:24rpx;
			flex:1;
			text-align: center;
			font-size: 24rpx
		}
	}
	.btn-group{
		border-radius: 50rpx;
		overflow: hidden;
		margin:100rpx 0 50rpx;
		.filter-reset{
			box-sizing: border-box;
			padding: 24rpx 0;
			flex:1;
			background-color: #DDDDDD;
		}
		.filter-confirm{
			box-sizing: border-box;
			padding: 24rpx 0;
			flex:1;
			background-color: #FFBB1A;
		}
	}
	
</style>
